<template>
	<u-sticky>
		<view :class="{'v-filter-dropdown': true, active: show}">
			<view class="hd">
				<view :class="{ item: true, active: value === index }" v-for="(item, index) in name" :key="index"
					@click="onClick(index)">
					<text>{{ item }}</text>
					<u-icon name="arrow-down-fill"></u-icon>
				</view>
			</view>
			<view class="bd" v-if="show">
				<slot></slot>
			</view>
			<u-overlay zIndex="900" :show="show" @click="onClose"></u-overlay>
		</view>
	</u-sticky>
</template>

<script>
	export default {
		name: "v-filter-dropdown",
		props: {
			name: {
				type: Array,
				default: () => [],
			},
			value: {
				type: Number,
				default: -1,
			},
		},
		data() {
			return {
				show: false,
			};
		},
		methods: {
			onClick(index) {
				this.show = true;
				this.$emit("input", index);
			},
			onClose() {
				this.show = false;
				this.$emit("input", -1);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.v-filter-dropdown {
		&.active {
			position: fixed;
			left: 0;
			top: 0;
			/* #ifdef H5 */
			top: calc(var(--status-bar-height) + var(--window-top));
			/* #endif */
			right: 0;
		}

		.hd,
		.bd {
			position: relative;
			z-index: 999;
			background: #fff;
		}

		.hd {
			display: flex;

			.item {
				padding: 4px 6px;
				display: flex;
				flex: 1;
				justify-content: center;

				&.active {
					color: red;
				}
			}
		}
	}
</style>
